<template>
  <!--  用户管理页-->
  <div style="height: 6vh;padding:10px 20px ; background-color: #fff">
    <span style="line-height: 60px;font-size: 20px">用户管理</span>
    <el-button type="primary" style="float: right;margin-top: 10px;" @click="beforeAddUser">新建员工</el-button>
  </div>
  <!--  用户弹窗-->
  <!--  :before-close 在每次点击关闭按钮，或者 点击窗口外部时，都提示-->
  <el-dialog style="width: 1000px;padding:40px;" v-model="dialogVisible" :before-close="cancelAdd" :title="dialogTitle">
    <el-form label-position="top" label-widt="80px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="用户名">
            <!--            什么时候禁用  在它编辑的时候   而不是新增的时候-->
            <el-input placeholder="请输入用户名" v-model="saveUserForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="saveUserForm.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input placeholder="请输入邮箱" v-model="saveUserForm.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄">
            <el-input placeholder="请输入年龄" v-model="saveUserForm.age"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="职级">
            <el-select placeholder="请选择" v-model="saveUserForm.level" @change="loadLeader">
              <el-option label="员工" value="10"></el-option>
              <el-option label="经理" value="20"></el-option>
              <el-option label="总监" value="30"></el-option>
              <el-option label="总裁" value="40"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="直属领导">
            <el-select placeholder="请选择" v-model="saveUserForm.parentId">
              <el-option v-for="item in leaderOptions" :label="item.username" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="性别">
            <el-radio-group v-model="saveUserForm.gender">
              <el-radio label="男" value="1" style="margin: 0;" border></el-radio>
              <el-radio label="女" value="0" style="margin: 0" border></el-radio>
            </el-radio-group>
          </el-form-item>

        </el-col>

        <el-col :span="6">
          <el-form-item label="用户状态" label-width="80px">
            <el-radio-group v-model="saveUserForm.status">
              <el-radio label="启动" value="1" style="margin: 0"></el-radio>
              <el-radio label="关闭" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="saveUser">保存</el-button>
      <el-button @click="cancelAdd">取消</el-button>
    </template>
  </el-dialog>

  <!--  用户搜索卡片-->
  <el-card style="margin: 10px;height: 70px">
    <el-form :inline="true">
      <el-form-item label="用户搜索" style="width: 270px;">
        <el-input placeholder="请输入用户名" v-model="searchUserForm.username"></el-input>
      </el-form-item>
      <el-form-item label="用户状态" style="width: 270px;">
        <el-select placeholder="请输入用户状态" v-model="searchUserForm.status">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @keydown.enter="loadUser">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!--  用户列表卡片-->
  <el-card style="margin: 10px;">
    <el-table :data="userArr">
      <el-table-column type="index" label="编号" width="80px"></el-table-column>
      <el-table-column label="用户名" property="username"></el-table-column>
      <el-table-column label="手机号" property="phone"></el-table-column>
      <el-table-column label="创建时间" property="createTime"></el-table-column>
      <el-table-column label="用户状态" property="status">
        <template #default="scope">
          <el-switch active-value="1" inactive-value="0" v-model="scope.row.status"
                     @change="changeStatus(scope.row.id,scope.row.status)"></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template #default="scope">
          <!--          :disable="scope.row.level==40 如果当前行对象的职级为40，也就是总裁，禁止操作"-->
          <el-button link type="primary" :disabled="scope.row.level==40" @click="resetPassword(scope.row.id)">密码重置
          </el-button>
          <el-button link type="primary" :disabled="scope.row.level==40" @click="editUser(scope.row.id)">编辑
          </el-button>
                    <el-button link type="primary" :disabled="scope.row.level==40" @click="delUser(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs"

const saveUserForm = ref({
  username: '',
  phone: '',
  email: '',
  age: '',
  level: '',
  parentId: '',
  gender: '',
  status: ''
})
const searchUserForm = ref({username: "", status: ''})
const dialogTitle = ref("新增员工")
const userArr = ref([])
const dialogVisible = ref(false)

const leaderOptions = ref([
  // {username: 'AA', id: '111'},
  // {username: 'BB', id: '222'}
])
const loadUser = () => {
  let data = qs.stringify(searchUserForm.value)

  axios.get(BASE_URL + '/v1/user/select?' + data)
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success("成功");
          userArr.value = response.data.data;
        } else {
          ElMessage.error(response.data.msg)
        }
      })

  console.log(data)

}

const resetSearch = () => {
  searchUserForm.value = {username: '', status: ''};
  loadUser();
}
onMounted(() => {
  loadUser()
})


const beforeAddUser = () => {
  dialogTitle.value = '新建员工';
  dialogVisible.value = true;
}


const cancelAdd = () => {
  alert("您确定要关闭吗？")
  saveUserForm.value = {};
  dialogVisible.value = false;
}


const saveUser = () => {
  console.log(saveUserForm.value);
  //
  let data = qs.stringify(saveUserForm.value);

  // axios.post(BASE_URL+"/v1/user/save",saveUserForm.value)
  axios.post(BASE_URL + "/v1/user/save", data)
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success("保存成功")
          dialogVisible.value = false;
          saveUserForm.value = {};
          //   新增用户成功后，重新加载用户列表
          loadUser();
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}


const loadLeader = () => {
  // 问题  如果选择了直属领导数据 再去切换职级  加载出来的可选直属领导数组里不包含之前已选择的那个领导，就会只显示领导id，显示不出来名字
  // 解决 在加载直属领导选型列表之前，先将用户选择的直属领导id和之前的领导数组清空 再加载
  leaderOptions.value = []
  saveUserForm.value.parentId = ''
  let level = parseInt(saveUserForm.value.level) + 10;
  axios.get(BASE_URL + "/v1/user/select?level=" + level).then((response) => {
    if (response.data.code == 2000)
      leaderOptions.value = response.data.data;
    else
      ElMessage.error(response.data.msg);
  })
}


// 修改信息
const editUser = (id) => {
  dialogTitle.value = '编辑员工';
  dialogVisible.value = true;
  axios.get(BASE_URL + "/v1/user/select?id=" + id).then((response) => {
        if (response.data.code == 2000) {
          // 为什么要取第一个  因为 savaUserForm 是表单  返回过来的数据是一个list
          saveUserForm.value = response.data.data[0];
          console.log(saveUserForm.value)
          let level = parseInt(saveUserForm.value.level) + 10;
          axios.get(BASE_URL + "/v1/user/select?level=" + level).then((response) => {
            if (response.data.code == 2000)
              leaderOptions.value = response.data.data;
            else
              ElMessage.error(response.data.msg);
          })
        } else {
          ElMessage.error(response.data.msg);
        }
      }
  )
}

// 修改密码
const resetPassword = (userId) => {
  axios.post(BASE_URL + "/v1/user/update/password/" + userId).then(
      (response) => {
        if (response.data.code == 2000)
          ElMessage.success("更新密码成功")
        else
          ElMessage.error("更新失败")
      })
}
// 修改状态
const changeStatus = (userId, status) => {
  axios.post(BASE_URL + "/v1/user/update/status/" + userId + '/' + status).then((response) => {
    if (response.data.code == 2000)
      ElMessage.success("修改状态成功")
    else
      ElMessage.error("修改失败")
  })
}

const delUser = (userId) => {

  if (confirm("确定删除员工吗"))
  {
    axios.post(BASE_URL + "/v1/user/del/" + userId).then((response) => {
      if (response.data.code == 2000) {
        ElMessage.success("删除成功")
        // 重新加载数据
        loadUser();
      } else {
        ElMessage.error("删除失败")
      }
    })
  }



}


</script>


<style scoped>

</style>